import Component from "../Component.js";

export default class Rotator extends Component {
    constructor() {
        super();
    }

    template() {
        const div = `<div id="rotator">
            <input type="range" name="slider" min="0" max="360" step="1" value="0" id="rotator-slider"/>
            <span id="rotator-value">360</span>
            <span class="icon iconfont" id="rotator-close">&#xe6f3;</span>
        </div>`;
        this.$$("#article").append(div);
        this.$$("#rotator-value").html(`0°`);
        this.$$("#rotator").hide();
    }

    control() {
        this.$$("#rotator-slider").on('change', () => {
            const value = this.$$("#rotator-slider").val();
            this.$$("#rotator-value").html(`${ value }°`);
            this.drawer.map.getView().setRotation(value / 360 * 2 * Math.PI);
        });

        this.$$("#rotator-close").on("click", () => {
            this.$$("#rotator").hide();
        });
    }
}